<template>
	<view class="vipContainer">
		<view class="vipbalance">
			<view style="font-size: 14px;">账户余额</view>
			<view class="balance">￥{{balance}}</view>
			<view class="" style="width: 80%;margin: 20px 0;">
				<picker class="cinput" mode="selector" :value="selectId" :range="rules" range-key="name" @change="pickerChange" style="border: none;padding: 0;">
					<view class="ruleItemActive" style="position: relative;height: 44px;width: 100%;text-align: center;line-height: 44px;">
						<view v-if="rulesObj.name">{{rulesObj.name}}</view>
						<view v-else style="color: #999;">请选择充值优惠</view>
						<img style="width: 20px;height: 20px;position: absolute;right: 10px;top: 12px;" src="@/static/xiala.png" alt="">
					</view>
				</picker>
			</view>
		<!-- 	<view style="width: 80%;margin-top: 10px;">
				<view v-for="(item,index) in rules" :key="index" :class="selectId === item.id?'ruleItemActive':'ruleItem'" @click="selectId = item.id">
					{{item.name}}
					<img v-if="selectId === item.id" style="width: 20px;height: 20px;position: absolute;right: 10px;" src="@/static/active.png" alt="">
				</view>
			</view> -->
			<view class="" style="width: 80%;" v-if="selectId === 'a8'">
				<input class="cinput" type="number" v-model="balanceValue" placeholder="请输入充值金额">
			</view>
			<view class="submitBtn" @click="recharge">立即充值</view>
		</view>
		<view class="history" @click="toHistory">
			<view>充值记录</view>
			<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
		</view>
		<view class="interests">
			<view class="title">会员卡规则</view>
			<view style="height: 10px;"></view>
			<view class="descTitle">1. 会员资格</view>
			<view class="desc">1.1 任何人均可申请成为洗丫丫洗衣的会员，包括个人和企业。</view>
			<view class="desc">1.2 申请成为会员需要填写相关个人或企业信息，并对应消费相应的金额。</view>
			<view class="desc">1.3 一旦被接受为会员，会员资格则生效。</view>
			<view class="descTitle">2. 会员权益</view>
			<view class="desc">2.1 会员可享受优先预约、优先洗护、优惠折扣等特权。</view>
			<view class="desc">2.2 会员可免费获得一定次数的上门取送服务。</view>
			<view class="desc">2.3 会员可在洗丫丫洗衣店或线上小程序，享受积分累计和兑换礼品的权益。</view>
			<view class="desc">2.4 会员有权随时查询自己的会员权益和积分余额。</view>
			<view class="desc">2.5 洗丫丫洗衣将定期组织会员活动，会员有权参加活动并享受相应福利。</view>
			<view class="descTitle">3. 会员权责</view>
			<view class="desc">3.1 会员需遵守洗丫丫洗衣的各项规章制度。</view>
			<view class="desc">3.2 会员需在指定时期内消费相对应的费用，维护会员的有效身份。</view>
			<view class="desc">3.3 会员有义务保护个人资料的安全和隐私。</view>
			<view class="desc">3.4 会员发现洗丫丫洗衣服务不达标或存在问题，有权提出合理建议和批评。</view>
			<view class="descTitle">4. 会员服务</view>
			<view class="desc">4.1 洗丫丫洗衣将为会员提供专属的快捷服务通道。</view>
			<view class="desc">4.2 洗丫丫洗衣将根据会员需求提供个性化的洗护方案。</view>
			<view class="desc">4.3 洗丫丫洗衣将提供不同会员级别的积分奖励和积分兑换活动。</view>
			<view class="desc">4.4 洗丫丫洗衣将提供优先关怀服务，包括会员生日礼物、专属优惠等。</view>
			<view class="descTitle">5. 规则变更和解除</view>
			<view class="desc">5.1 洗丫丫洗衣有权根据实际情况对本规则进行变更，变更后的规则将通过合适的方式通知会员。</view>
			<view class="desc">5.2 会员有权选择接受变更后的协议，或选择终止会员资格。</view>
		</view>
		<view class="withdrawal" @click="toWitDrawal" v-if="vip_card_no">我要退卡</view>
	</view>
</template>

<script>
	import { vipcardRules, takeIn, getUserInfo } from '@/api/home.js'
	export default{
		data() {
			return {
				balance: '1000',
				rules:[],
				selectId: 0,
				balanceValue:'',
				vip_card_no:'',
				rulesObj: {name:''},
			}
		},
		onLoad(options) {
			this.getInfo()
			vipcardRules().then(res=>{
				res.data.push({name:'手动输入金额（无优惠）',id:'a8'})
				this.rules = res.data
			})
		},
		methods:{
			getInfo(){
				getUserInfo().then(res=>{
					this.vip_card_no = res.data.vip_card_no
					this.balance = res.data.vip_card_balance
				})
			},
			pickerChange(e){
				let index = Number(e.target.value)
				this.rulesObj = this.rules[index]
				this.selectId = this.rules[index].id
			},
			toWitDrawal() {
				uni.redirectTo({
					url: '/pages/withdrawal/index?balance='+this.balance
				})
			},
			balanceChange(e){
				const value = e.target.value
				let newData = []
				this.rules.map(item=>{
					if(Number(item.deposit_amount) <= value) newData.push(item)
				})
				if(newData.length>0) {
					const maxItem = newData.reduce((prev, current) => (Number(prev.deposit_amount) > Number(current.deposit_amount)) ? prev : current)
					this.rulesObj = maxItem
				}
			},
			toHistory() {
				uni.navigateTo({
					url:'/pages/vipLogs/index'
				})
			},
			recharge(){
				let that = this
				if(!this.selectId) return uni.showToast({
					title:'请选择充值优惠',
					icon:'none'
				})
				if(this.selectId === 'a8' && !this.balanceValue) return uni.showToast({
					title:'请输入充值金额',
					icon:'none'
				})
				takeIn({payMoney:this.balanceValue || this.rulesObj.deposit_amount,ruleId:this.selectId === 'a8'?'':this.selectId}).then(res=>{
					const data = res.data
					wx.requestPayment({
						...data,
						success(res) {
							that.getInfo()
							// 支付成功后的逻辑
							uni.showToast({
							  title: '支付成功',
							  icon: 'success'
							});
						},
						fail(err) {
							// 支付失败后的逻辑
							uni.showToast({
							  title: '支付失败',
							  icon: 'none'
							});
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.ruleItemActive{
		text-align: center;
		// padding: 10px;
		border: 2px solid #2c6cf4;
		color: #2c6cf4;
		font-size: 14px;
		border-radius: 4px;
		margin-bottom: 10px;
		position: relative;
	}
	.ruleItem{
		text-align: center;
		padding: 10px;
		border: 2px solid #f2f2f2;
		border-radius: 4px;
		margin-bottom: 10px;
	}
	.vipContainer{
		padding: 10px;
		box-sizing: border-box;
		.withdrawal{
			text-align: center;
			color: #2c6cf4;
			font-size: 12px;
			margin-top: 20px;
		}
		.interests{
			background-color: #fff;
			padding: 15px;
			border-radius: 4px;
			margin-top: 10px;
			font-size: 14px;
			.title{
				font-size: 14px;
				font-weight: bold;
			}
			.descTitle{
				font-weight: bold;
				margin-top: 10px;
			}
			.desc{
				margin-top: 10px;
				text-indent: 1em
			}
		}
		.history{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 15px;
			font-size: 15px;
			border-radius: 4px;
			margin-top: 10px;
		}
		.vipbalance{
			background-color: #fff;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40px 0 30px;
			.balance{
				font-size: 17px;
				font-weight: bold;
				margin-top: 6px;
			}
			.tinput{
				width: 80%;
				border: 1px solid #2c6cf4;
				border-radius: 4px;
				padding: 10px;
				font-size: 13px;
				margin: 20px 0;
			}
			.cinput{
				width: 100%;
				border: 1px solid #f2f2f2;
				border-radius: 4px;
				padding: 10px;
				font-size: 13px;
				box-sizing: border-box;
				height: 44px;
			}
			.submitBtn{
				margin-top: 30px;
				background-color: #2c6cf4;
				color: #fff;
				padding: 10px 30px;
				border-radius: 6px;
				font-size: 13px;
			}
		}
	}
</style>